<template>
  <div id="app">
    <heads></heads>
    <projectHead1 v-if="$route.path=='/contract'?true:false"></projectHead1>
    <projectHead2 v-if="$route.path=='/game'?true:false"></projectHead2>
    <projectHead3 v-if="$route.path=='/agreement'?true:false"></projectHead3>
    <keep-alive>
      <transition name="fade" mode="in-out">
        <router-view v-if="$route.meta.keepAlive" />
      </transition>
    </keep-alive>
    <transition name="fade" mode="in-out">
      <router-view v-if="!$route.meta.keepAlive" />
    </transition>
    <bottom></bottom>
  </div>
</template>

<script>
import heads from "./components/head";
import bottom from "./components/bottom";
import { userInfo } from "./api/api";
import qs from 'qs'
import { mapState } from 'vuex'
import projectHead1 from "./project1/components/projectHead/projectHead";
import projectHead2 from "./project2/components/projectHead/projectHead";
import projectHead3 from "./project3/components/projectHead/projectHead";
export default {
  name: "App",
  data() {
    return {};
  },
  created() {
    // console.log(this.$route.path);
    // console.log(this.token)
    this.userInfoStatus();
  },
  computed:{
    ...mapState(['token'])
  },
  watch:{
    "token"(){
      this.userInfoStatus();
    }
  },
  components: {
    heads,
    bottom,
    projectHead2,
    projectHead1,
    projectHead3
  },
  methods: {
    //查看认证状态
    userInfoStatus() {
      userInfo({
        token: this.token
      })
        .then(res => {
          this.$store.commit('getUserInfo',JSON.stringify(res.data.data))
        })
    }
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
@font-face {
  font-family: "DIN-Bold";
  src: url("./assets/ttf/DIN-Bold.ttf");
  font-family: "DIN-Medium";
  src: url("./assets/ttf/DIN-Medium.ttf");
  font-family: "DIN-Regular";
  src: url("./assets/ttf/DIN-Regular.ttf");
  font-family: "digital.ttf";
  src: url("./assets/ttf/digital.ttf");
}
#app {
  font-family: "DIN-Bold", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #334d50;
  min-width: 1200px;
  .nav-distribution {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    > div {
      display: flex;
    }
  }
}
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.2s;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.2s;
}
</style>
